<!-- 视频信息卡片 -->
<template>
    <div class="video-box">
        <div class="flex">
            <div class="video-content mg-r-10">
                <VideoComponent :video-list="videoList">
                    <div class="status" :class="[`status-${itemData.status}`]">{{ occupationStatusMap[itemData.status] }}</div>
                </VideoComponent>
                <!-- <VideoComponent :video-list="[videoSrc]"/> -->
            </div>
            <div class="w-full">
                <div class="flex mg-b-12">
                    <div class="fc-grey fs-12 label">申请时间</div>
                    <div class="fs-12 bold">{{ itemData.createTime }}</div>
                </div>
                <div class="flex mg-b-12">
                    <div class="fc-grey fs-12 label">申请人</div>
                    <div class="fs-12 bold">{{ itemData.createUserName }}</div>
                </div>
                <div v-if="itemData.status === 1" class="flex">
                    <div class="fc-grey fs-12 label">申请工种</div>
                    <div class="fs-12 bold">
                        <div v-for="(item, index) in itemData.occupationList" :key="index">
                            {{ item.level }}类{{ item.name }}
                        </div>
                    </div>
                </div>
                <div v-if="itemData.status === 2" class="flex">
                    <div class="fc-grey fs-12 label">驳回理由</div>
                    <div class="fs-12 bold word-break">{{ itemData.rejectRemark }}</div>
                </div>
                <div v-if="showButton && itemData.status === 0" class="flex flex-jc-end gap-10px">
                    <div class="button button-1 pointer" @click="onReject">驳回</div>
                    <div class="button button-2 pointer" @click="onConfirm">通过</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import VideoComponent from '@/components/VideoComponent/index.vue'
import { occupationStatusMap } from '@/utils/map.js'

const props = defineProps({
    itemData: {
        type: Object,
        default() {
            return {}
        }
    },
    showButton: {
        type: Boolean,
        default: false
    }
})

const videoList = computed(() => {
    return props.itemData?.fileDetails.map((i: any) => i.fileUrl) || []
})

const emits = defineEmits(['reject', 'confirm'])

const onReject = () => {
    emits('reject', props.itemData)
}

const onConfirm = () => {
    emits('confirm', props.itemData)
}

</script>
<style lang="scss" scoped>
.video-box {
    padding: 20px 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0, 214, 121, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

    .label {
        min-width: 5em;
    }

    .button {
        font-size: 12px;
        padding: 9px 16px;
        border-radius: 20px;
        color: #fff;
    }

    .button-1 {
        background: #FF7E68;
    }

    .button-2 {
        background: #3E5FF5;
    }

    .status {
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        font-size: 10px;
        padding: 2px 7px;
        border-radius: 4px 0 4px 0;
        &-0 {
            background: #FFA814;
        }
        &-1 {
            background: #00D679;
        }
        &-2 {
            background: #FF7642;
        }
        &-3 {
            background: #565868;
        }
    }
}
.word-break {
    word-break: break-all;
}
</style>